<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :default-config="toolbarConfig" />
      <!-- 编辑器 -->
      <Editor
        style="height: 400px; overflow-y: hidden"
        :default-config="editorConfig"
        :value="value"
        @onChange="onChange"
        @onCreated="onCreated"
      />
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  name: 'MyEditor',
  components: { Editor, Toolbar },
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    placeHolder: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: '',
      require: true
    },
    maxLength: {
      type: Number,
      default: 0
    },
    toolbarKeys: {
      type: Array,
      default: () => ['fontFamily',
        'fontSize',
        'fullScreen',
        'header1',
        'header2',
        'header3',
        'header4',
        'header5',
        'headerSelect',
        'bgColor',
        'blockquote',
        'bold',
        'bulletedList',
        'numberedList',
        'clearStyle',
        'code',
        'codeBlock',
        'color',
        'tableFullWidth',
        'tableHeader',
        'indent',
        'delIndent',
        'deleteTable',
        'deleteTableCol',
        'deleteTableRow',
        'divider',
        'insertTable',
        'insertTableCol',
        'insertTableRow',
        'italic',
        'justifyCenter',
        'justifyJustify',
        'justifyLeft',
        'justifyRight',
        'lineHeight',
        'through',
        'redo',
        'undo']
    }
  },
  data() {
    return {
      editor: null,
      html: this.value,
      toolbarConfig: {
        toolbarKeys: this.toolbarKeys,
        excludeKeys: [
          // 'insertVideo',
          // 'imageWidth30',
          // 'imageWidth50',
          // 'imageWidth100',
          // 'insertImage',
          // 'insertLink',
          // 'uploadImage',
          // 'uploadVideo',
          // 'viewLink',
          // 'editImage',
          // 'editLink',
          // 'editVideoSize',
          // 'emotion',
          // 'deleteImage'
        ]
      },
      editorConfig: {
        placeholder: this.placeHolder,
        MENU_CONF: {},
        maxLength: this.maxLength
      }
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
      // console.log(this.editor.getConfig().MENU_CONF)
    },
    onChange(editor) {
      // console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
      // console.log('onChange')
      this.$emit('update:value', editor.getHtml())
      this.$emit('getText', editor.getText())
    },
    getEditorText() {
      const editor = this.editor
      if (editor == null) return

      // console.log('getEditorText', editor.getText()) // 执行 editor API
    }
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
